<template>
  <div>
    <h1>人员信息</h1>
    <ul>
      <li v-for="p in personList" :key="p.id">
        {{ p.name }} - {{ p.age }} 岁
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { type Person, type Persons } from "@/types";

// 定义单个 Person 对象
let person: Person = { id: "1", name: "张三", age: 18 };

// 定义 Person 数组（使用自定义类型）
let personList: Persons = [
  { id: "1", name: "张三", age: 18 },
  { id: "2", name: "李四", age: 19 },
  { id: "3", name: "王五", age: 20 },
  { id: "4", name: "赵六", age: 21 },
];

// 定义 Person 数组（使用泛型）
let personList2: Array<Person> = [
  { id: "1", name: "张三", age: 18 },
  { id: "2", name: "李四", age: 19 },
  { id: "3", name: "王五", age: 20 },
  { id: "4", name: "赵六", age: 21 },
];

console.log(person);
</script>

<style scoped>
ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin: 10px 0;
  font-size: 18px;
}
</style>